<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__PUBLIC__/BeginnerAdmin/plugins/layui/css/layui.css" media="all" />
</head>
<body>
<div id="body" style="width: 90%;margin:20px 20px 0px 10px;">
    <div id="table">
        <div id="buttgroup">
            <a href="javascript:;" class="layui-btn" style="margin-right: 3px;">添加数据</a>
            <a href="javascript:jiazaishuju();" class="layui-btn">加载数据</a>
        </div>
        <div id="from" style="border: 1px solid #f0f1f2;margin-top:10px;">

            <form class="layui-form" action="">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">任务代码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" required  lay-verify="code" placeholder="请输入任务代码" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tab" required lay-verify="tab" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">输入</option>
                            <option value="1">待确认</option>
                            <option value="2">对应中</option>
                            <option value="3">完成待确认</option>
                            <option value="4">AMO对应完成</option>
                            <option value="5">已关闭</option>
                            <option value="6">关闭（未对应）</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">起始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="start" id="start" required  lay-verify="start" placeholder="开始时间" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">结束日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="last" id="last" required lay-verify="last" placeholder="结束时间" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">问题提出方</label>
                    <div class="layui-input-inline">
                        <input type="text" name="problem" required lay-verify="problem" placeholder="问题提出方" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top: 10px;">

                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">输入</option>
                            <option value="1">待确认</option>
                            <option value="2">对应中</option>
                            <option value="3">完成待确认</option>
                            <option value="4">AMO对应完成</option>
                            <option value="5">已关闭</option>
                            <option value="6">关闭（未对应）</option>
                        </select>
                    </div>
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">输入</option>
                            <option value="1">待确认</option>
                            <option value="2">对应中</option>
                            <option value="3">完成待确认</option>
                            <option value="4">AMO对应完成</option>
                            <option value="5">已关闭</option>
                            <option value="6">关闭（未对应）</option>
                        </select>
                    </div>
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">输入</option>
                            <option value="1">待确认</option>
                            <option value="2">对应中</option>
                            <option value="3">完成待确认</option>
                            <option value="4">AMO对应完成</option>
                            <option value="5">已关闭</option>
                            <option value="6">关闭（未对应）</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>昵称</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody id="tableshuju">

            </tbody>
        </table>
    </div>
</div>

<script src="__PUBLIC__/BeginnerAdmin/plugins/layui/layui.js"></script>
<script src="__PUBLIC__/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script>
    layui.use(['form','laydate','layer'], function(){
        var form = layui.form,laydate = layui.laydate;

        laydate.render({
            elem: '#start' //指定元素
            ,type:'datetime'
        });
        laydate.render({
            elem: '#last' //指定元素
            ,type:'datetime'
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            console.log(data);
            $.post('你要提交的地址',data.field,function (data) {
                layer.msg(data);
            });
            return false;
        });
    });

    //将页面的数据隐藏，当点击显示的时候，显示数据

    function jiazaishuju() {
        var shuju = [{"name":"贤心","time":"2016-11-29","msg":"人生就像是一场修行"},{"name":"许闲心","time":"2016-11-28","msg":"于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…"}];
        console.log(shuju);
        var  html_json;
        for (var i=0; i<shuju.length;i++){
            html_json += '<tr><td>'+shuju[i].name+'</td><td>'+shuju[i].time+'</td><td>'+shuju[i].msg+'</td></tr>'
        }

        //获取input数据
        var lasttime = $("#last").val();

        //向div填充数据
        $("#tableshuju").html(html_json);
    }
</script>
</body>
</html>